<template>
	<view class="container">
		<view class="info">
			<view>链接: <input v-model="link"></view>
			<view>订单号: {{ out_trade_no }}</view>
			<view>订单价格: {{ money }}</view>
		</view>
		<image v-if="imgUrl" id="img1" ref="image1" :src="imgUrl" show-menu-by-longpress="true"></image>
		<canvas ref="qrcode1" id="qrcode" canvas-id="qrcode"></canvas>

		<view class="share-box" @click="copyLink">
			<button class="share-btn" :plain="true">
				<view class="iconfont icon-fuzhilianjie"></view>
				<text>复制链接</text>
			</button>
		</view>
		<view class="text-center">倒计时：{{seconds}}秒</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs'
	export default {
		data() {
			return {
				link: '', // 编码后的链接地址
				delink: 'weixin://dl/ffdvh/path＝xxxxxx', // 解码后的链接地址
				out_trade_no: '123335535',
				money: '899',

				imgUrl: '',

				seconds: 20,
				timer: null
			}
		},
		onLoad(options) {
			console.log('options:', options)
			// 设置默认值
			// this.link = options.link ? decodeURIComponent(options.link) : 'https://baidu.com',
			// 	this.out_trade_no = options.out_trade_no ? decodeURIComponent(options.out_trade_no) : '2024050901',
			// 	this.money = options.money ? decodeURIComponent(options.money) : '1.88'
			// this.drawImg()
			// this.generateQRCode(this.link);
			// this.createQRCode()


			this.link = options
				.link // weixin://dl/business/?appid=wx49e2e406036817a8&path=pages/order/scan_code?link=https://game.2006wd.cn/sdk/pay/topay2?money='.$payAmount.'&out_trade_no='.$outTradeNo.'&code_url='.urlencode($code_url);
			this.delink = decodeURIComponent(options.link) // https://game.2006wd.cn/sdk/pay/topay2
			this.out_trade_no = options.out_trade_no
			this.money = options.money



			// this.delink = 'https://game.2006wd.cn/sdk/pay/UQRCode
			this.delink =
				'https://qr.95516.com/00010048/unifiedNative?token=12d3c5402311f130a32f008756d3b526&target=qfs&unit=shw1'
			this.out_trade_no = '1278724724'
			this.money = '6899'
			this.drawQRcode()
		},

		methods: {
			/** 生成canvas二维码 */
			drawQRcode() {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.delink
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				setTimeout(() => {
					this.generateImg()
				}, 1000)
			},
			/**  把canvas二维码转换成二维码图片 */
			generateImg() {
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: (res) => {
						console.log('res:', res)
						this.imgUrl = res.tempFilePath;
						uni.hideLoading();
					},
					fail: (err) => {
						console.error(err);
						uni.hideLoading();
					}
				}, this);
			},
			showTipModal() {
				uni.showModal({
					title: '提示',
					content: '二维码已过期，重新生成二维码',
					success: (res) => {
						if (res.confirm) {
							clearInterval(this.timer)
							this.seconds = 20
							this.drawQRcode()
						} else if (res.cancel) {

						}
					}
				});
			},
			copyLink() {
				console.log('尝试复制的链接:', this.link); // 输出要复制的链接，检查是否有误
				if (!this.delink) {
					uni.showToast({
						title: '链接为空，无法复制',
						icon: 'none'
					});
					return;
				}
				var _this = this;
				uni.setClipboardData({
					data: _this.delink,
					success: () => {
						uni.showToast({
							title: '链接复制成功',
							icon: 'success'
						});
					},
					fail: () => {
						console.log('尝试复制的链接2:', _this.link);
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style>
	#img1 {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}

	#qrcode {
		width: 200px;
		height: 200px;
		opacity: 0;
		z-index: 1;
		position: absolute;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 10px;
		position: relative;
	}

	.info text {
		margin-bottom: 10px;
	}

	.qrimg {
		display: flex;
		justify-content: center;
	}

	.qrimg-i {
		margin-right: 10px;
	}

	slider {
		width: 100%;
	}

	input {
		width: 100%;
		margin-bottom: 20upx;
	}

	.btns {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	button {
		width: 100%;
		margin-top: 10upx;
	}
</style>


//plus.runtime.openURL( '"https://www.baidu.com" );
//uniapp本身就可以直接调用plus，ios和安卓都支持 跳转外部链接，用于支付成功后，跳转回游戏